<template>
	<view class="popup_btn" :style="{height: height+'px'}">
		<view class="CON">
			<view class="L">
				<view class="top">
					<view>合计:<text style="color:#FF4C5A;padding: 0 6rpx;">{{allPrice}}</text>福币</view>
					<view @click="openEquip" v-if="isShow">已选装备({{buyList.length}})
						<up-icon :name="store.state.userInfo.flag?'arrow-down':'arrow-up'" color="#666666"
							size="20rpx"></up-icon>
					</view>
				</view>
				<view class="bottom">
					<view>余额:{{Info.ybCoinNumber}}福币</view>
					<view @click="goRecharge">去充值<up-icon name="arrow-right" color="#FBC438" size="20rpx"></up-icon>
					</view>
				</view>
			</view>
			<view class="R" @click="buy">
				{{isEnough?'供奉':'福币不足,请充值'}}
			</view>
		</view>
	</view>
	<KeyBoard ref="KeyBoardRef" @sendPass='sendPass' />
</template>

<script setup>
	import KeyBoard from '@/components/keyboard.vue';
	import store from '@/store/index.js'; //需要引入store
	import {
		computed,
		defineProps,
		ref,
		defineEmits,
		// useStore
	} from 'vue'
	import popupCompVue from '/components/popup/index.vue';
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import HomeApi from '@/API/home/index.js'
	import MineApi from '@/API/mine/index.js'
	const homeApi = new HomeApi();
	const mineApi = new MineApi();
	const props = defineProps({
		offeringType: {
			type: String || Number,
		},
		buyList: {
			type: Array,
			default: []
		},
		type: {
			type: Number || String,
		},
		isShow: {
			type: Boolean,
			default: true
		},
	})
	const emit = defineEmits(['sendHeight', 'openEquip', 'queryParent']);
	const KeyBoardRef = ref();
	let height = ref(uni.upx2px(150))
	let Info = ref({})
	let allPrice = ref(0)
	setTimeout(() => {
		emit('sendHeight', height.value)
		getInfo()

	}, 1)
	const getInfo = async () => {
		if (!store.state.userInfo.userInfo.phoneNumber) {
			await store.dispatch('setUserInfo');
		}
		Info.value = store.state.userInfo.userInfo
	}
	const isEnough = computed(() => {
		let price = 0
		props.buyList.forEach((ele) => {
			price += ele.price
		})
		allPrice.value = price
		if (Info.value.ybCoinNumber >= price) {
			return true
		} else {
			return false
		}
	})
	const openEquip = (() => {
		store.state.userInfo.flag = !store.state.userInfo.flag
		emit('openEquip', store.state.userInfo.flag)
	})
	const goRecharge = () => {
		uni.navigateTo({
			url: '/subPages/mine/cloudCoin/recharge'
		})
	}
	const buy = (() => {
		if (!isEnough.value) {
			uni.showToast({
				'icon': 'none',
				title: '余额不足'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/subPages/mine/cloudCoin/recharge'
				})
			}, 1000)
			return
		}
		
		if(props.buyList.length===0){
			uni.showToast({
				'icon': 'none',
				title: '请选择供奉物'
			})
			return
		}
		
		emit('buy',props.buyList)
		
		// 香油
		// if (props.type == 'addOil') {
		// 	homeApi.oilHallApi({
		// 		hallId: uni.getStorageSync('hallId'),
		// 		addId: 1,
		// 	}).then((res) => {
		// 		uni.showToast({
		// 			'icon': 'none',
		// 			title: res.msg
		// 		})
		// 		getInfo()
		// 		setTimeout(() => {
		// 			emit('queryParent')
		// 		}, 100)
		// 	}).catch(() => {})
		// }
		// if (props.type == 'oblation' || props.type == '1' || props.type == '2' || props.type == '3') {
		// 	if (!props.buyList.length) {
		// 		uni.showToast({
		// 			'icon': 'none',
		// 			title: '请选择商品'
		// 		})
		// 		return
		// 	}
		// 	KeyBoardRef.value.showKeyboard = true
		// }

	})
	const sendPass = ((e) => {
		// 祭品购买
		if (props.type == 'oblation') {
			let ids = props.buyList.map(ele => ele.offeringId)
			mineApi.buyOffering({
				offeringIdStr: ids,
				buyAmountStr: new Array(ids.length).fill(1),
				paymentPassword: e,
				correspondingId: props.offeringType == 1 ? uni.getStorageSync('memorialId') : props
					.offeringType == 2 ? uni.getStorageSync('memorialId') : props.offeringType == 3 ? uni
					.getStorageSync('memorialServiceId') : props.offeringType == 4 ? uni.getStorageSync(
						'peopleId') : props.offeringType == 5 ? uni.getStorageSync('hallId') : undefined,
				// 在哪里购买（1:纪念馆，2:墓园，3:追思会，4:祭拜，5:祠堂）
				belongingTo: props.offeringType
			}).then((res) => {
				uni.showToast({
					'icon': 'none',
					title: res.msg
				})
				KeyBoardRef.value.showKeyboard = false
				getInfo()
				setTimeout(() => {
					emit('queryParent')
				}, 100)
			}).catch(() => {})
		}
		// 装饰购买(1纪念馆，2墓园，3祠堂)
		if (props.type == '1' || props.type == '2' || props.type == '3') {
			let ids = props.buyList.map(ele => ele.id)
			homeApi.buyDecorationDecorationApi({
				belongingTo: props.type,
				paymentPassword: e,
				correspondingId: props.type == '1' ? uni.getStorageSync('memorialId') : props.type ==
					'2' ? uni.getStorageSync('memorialId') : props.type == '3' ? uni.getStorageSync(
						'hallId') : undefined,
				decorationDecorationIds: ids
			}).then((res) => {
				uni.showToast({
					'icon': 'none',
					title: res.msg
				})
				KeyBoardRef.value.showKeyboard = false
				getInfo()
				setTimeout(() => {
					emit('queryParent')
				}, 100)
			}).catch(() => {})
		}

	})
</script>

<style lang="scss">
	.popup_btn {
		position: fixed;
		z-index: 100099;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -8rpx 20px 4px rgba(212, 198, 179, 0.15);

		@media screen and (min-width: 992px) {
			width: 828rpx;
			margin: 0 auto;
			box-sizing: border-box;
			left: 50%;
			transform: translateX(-50%);
		}

		.CON {
			position: relative;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;
			box-sizing: border-box;

			.L {
				display: flex;
				flex-direction: column;

				.top {
					display: flex;

					view:nth-child(1) {
						font-size: 32rpx;
					}

					view:nth-child(2) {
						display: flex;
						align-items: center;
						padding-left: 16rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.bottom {
					padding-top: 20rpx;
					display: flex;

					view:nth-child(1) {
						font-size: 24rpx;
						color: #666666;
					}

					view:nth-child(2) {
						display: flex;
						align-items: center;
						padding-left: 8rpx;
						font-size: 24rpx;
						color: #FBC438;
					}
				}
			}

			.R {
				// background: url('http://112.124.50.179:8888/imgs/home/btnbg.png')no-repeat;
				// background-size: 100%;
				width: 260rpx;
				height: 76rpx;
				background: linear-gradient( 180deg, #FFF1D5 0%, #FFD582 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #524630;
				line-height: 76rpx;
				letter-spacing: 1px;
				text-align: center;
			}
		}
	}
</style>